<template>
<div style="width:100%; background-color: #ECF5FF;">
    <!-- <div class="mine-nav">
        <div @click="back" style="float: left; margin-top: 5px; margin-left: 15px;">
            <img src="../../assets/themes/images/exit.png" height="35" width="35" />
        </div>
        <p style="margin-left: 40%; padding-top: 4px; font-size: 24px; color: #FF5151;">个人中心</p>
    </div> -->
    
    <br />
    <div class="my">
        <div class="my-pic">
            <img src="../../assets/themes/images/test/test1.jpg" />
        </div>
       <div class="my-id" style="padding-top: 15px;">
            木子卜厂七几
        </div>
        <div style="margin-left: 26%;">
            关注 0  粉丝  0
        </div>
    </div>
    
    <br style="line-height: 8px;" />
    <div class="block">
        <div class="little-block">
            收藏
        </div>
        <div class="little-block">
            足迹
        </div>
        <div class="little-block">
            草稿箱
        </div>
    </div>
    <br style="line-height: 8px;" />
    <div class="block">
        <div class="little-block">
            计划日历
        </div>
        <div class="little-block">
            已完成计划
        </div>
        <div class="little-block">
            错过计划
        </div>
    </div>
    <br style="line-height: 8px;" />
    <div class="block">
        <div class="little-block">
            切换用户
        </div>
        <div class="little-block">
            账户安全
        </div>
        <div class="little-block" @click='checkout'>
            <!-- <button>退出登录</button> -->
            退出登录
        </div>
    </div>
    <br />
</div>
</template>

<script>
export default{
    // mounted: function(){
    //     console.log(localStorage.getItem('userstatus')) // 如果登录了，这里就会获取到ok，否则会是null
    //     if (JSON.parse(localStorage.getItem('userstatus')) != 'login'){
    //         this.$router.push({path:'/no_login/'})
    //     }
    // },
    methods:{
        back(){
            this.$router.go(-1)
        },
        checkout(){
            this.$axios.get('user_abt/check_out/')
                .then(res=>{
                    console.log(res.data)
                    localStorage.removeItem('sessionid')
                    localStorage.removeItem('userstatus')
                    alert('退出登录')
                    this.$router.push({path:'/login'})
                })
        },
    },
}
</script>

<style scoped>
.{
    width: 100%;
}
.my{
    width: 94%;
    height: 80px;
    margin-left: 3%;
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.8);
    border-radius:30px;
}
.my-pic {
    width: 70px;
    height: 70px;
    float: left;
    margin-left: 2%;
    margin-top: 5px;
}
.my-pic img {
    width: 100%;
    height: 100%;
    border-radius:100%;
}
.my-id {
    margin-left: 26%;
    font-size: 18px;
    font-weight: bold;
}
.mine-nav{
    width: 100%;
    height: 45px;
    background-color: #ECF5FF;
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.8);
    /* text-align: center; */
}
.block{
    width: 94%;
    height: 150px;
    margin-left: 3%;
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.3);
}
.little-block{
    height: 50px;
}
</style>
